<template>
  <div class="flx-align-center">
    <el-switch
      :model-value="language"
      inline-prompt
      active-text="中"
      inactive-text="EN"
      active-value="zh"
      inactive-value="en"
      @change="handleSetLanguage1"
      class="mr10"
    />
    <el-dropdown trigger="click" @command="handleSetLanguage">
      <el-icon><MoreFilled /></el-icon>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item :disabled="language && language === 'zh'" command="zh"
            >简体中文</el-dropdown-item
          >
          <el-dropdown-item :disabled="language === 'en'" command="en">English</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { GlobalStore } from '@/store'
import { getBrowserLang } from '@/utils'

const i18n = useI18n()
const globalStore = GlobalStore()
const language = computed((): string => globalStore.language)
// 切换语言
const handleSetLanguage = (lang: string) => {
  i18n.locale.value = lang
  globalStore.updateLanguage(lang)
}
const handleSetLanguage1 = (val: string | number | boolean) => {
  const lang = val as string
  i18n.locale.value = lang
  globalStore.updateLanguage(lang)
}

onMounted(() => {
  handleSetLanguage(language.value || getBrowserLang())
})
</script>
